<template>
  <div class="job-recommendation-page">
    <!-- 顶部标题 -->
    <div class="header">
      <div class="tag">基于您的职级测试结果</div>
      <h1>为您精选的 P6 职位</h1>
      <p>AI智能分析您的能力水平，为您推荐最匹配的职业机会</p>
    </div>

    <!-- 职位卡片列表 -->
    <div class="job-cards">
      <div v-for="(job, index) in jobs" :key="index" class="job-card">
        <!-- AI推荐标签 -->
        <div class="ai-tag">AI推荐</div>

        <!-- 头部信息：Logo + 职位名 + 公司 + 地点 -->
        <div class="job-header">
          <div class="company-logo">{{ job.logo }}</div>
          <div class="job-title-section">
            <div class="job-title">{{ job.title }}</div>
            <div class="company-name">{{ job.company }}</div>
            <div class="location">{{ job.location }}</div>
          </div>
        </div>

        <!-- 薪资信息 -->
        <div class="salary-section">
          <div class="salary-item">
            <span class="label">总薪酬:</span>
            <span class="value" :style="{color: job.totalSalaryColor || '#27ae60', fontWeight: 'bold'}">{{ job.totalSalary }}</span>
          </div>
          <div class="salary-item">
            <span class="label">月薪:</span>
            <span class="value">{{ job.monthlySalary }}</span>
          </div>
          <div class="salary-item">
            <span class="label">股票:</span>
            <span class="value">{{ job.stock }}</span>
          </div>
        </div>

        <!-- 技术标签 -->
        <div class="tags">
          <span v-for="(tag, tagIndex) in job.tags" :key="tagIndex" class="tag">{{ tag }}</span>
        </div>

        <!-- 职位描述 -->
        <div class="description">
          {{ job.description }}
        </div>

        <!-- 底部交互区 -->
        <div class="footer-actions">
          <div class="interaction">
            <span class="icon">❤️</span> {{ job.likes }}
            <span class="icon">💬</span> {{ job.comments }}
            <span class="icon">⏰</span> {{ job.timeAgo }}
          </div>
          <button class="apply-btn">立即申请</button>
        </div>
      </div>
    </div>

    <!-- 底部操作按钮 -->
    <div class="footer-buttons">
      <button class="btn-reset">重新测试</button>
      <button class="btn-more">查看更多职位</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'JobRecommendation',
  data() {
    return {
      jobs: [
        {
          logo: '腾',
          title: '前端工程师',
          company: '腾讯',
          location: '深圳·中国',
          totalSalary: '¥ 156.2万JPY/年',
          totalSalaryColor: '#27ae60',
          monthlySalary: '¥ 2.8万/月',
          stock: '¥ 12.0万/年',
          tags: ['前端', 'React', 'TypeScript'],
          description: '开发高质量的前端应用，优化用户界面性能',
          likes: 67,
          comments: 5,
          timeAgo: '15天前'
        },
        {
          logo: '阿',
          title: '后端工程师',
          company: '阿里巴巴',
          location: '杭州·中国',
          totalSalary: '¥ 168.0万JPY/年',
          totalSalaryColor: '#27ae60',
          monthlySalary: '¥ 3.2万/月',
          stock: '¥ 8.0万/年',
          tags: ['后端', 'Java', 'Spring Boot'],
          description: '负责高并发系统设计与开发，优化服务性能',
          likes: 89,
          comments: 12,
          timeAgo: '7天前'
        },
        {
          logo: '百',
          title: 'UI设计师',
          company: '百度',
          location: '北京·中国',
          totalSalary: '¥ 120.0万JPY/年',
          totalSalaryColor: '#27ae60',
          monthlySalary: '¥ 1.8万/月',
          stock: '¥ 6.0万/年',
          tags: ['设计', 'UI', 'Figma'],
          description: '负责产品界面视觉设计，提升用户体验',
          likes: 42,
          comments: 3,
          timeAgo: '3天前'
        }
      ]
    }
  }
}
</script>

<style scoped>
.job-recommendation-page {
  background: linear-gradient(135deg, #6c9dff, #4a6fa5);
  color: white;
  padding: 40px;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 40px;
}

.tag {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 5px 15px;
  font-size: 14px;
  display: inline-block;
  margin-bottom: 10px;
}

.header h1 {
  font-size: 2.5rem;
  margin: 0;
}

.header p {
  font-size: 1rem;
  opacity: 0.8;
  margin-top: 10px;
}

.job-cards {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.job-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 320px;
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease;
}

.job-card:hover {
  transform: translateY(-5px);
}

.ai-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #fbbf24;
  color: white;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 12px;
  font-weight: bold;
}

.job-header {
  display: flex;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.company-logo {
  width: 50px;
  height: 50px;
  background-color: #ff6b00;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 20px;
  margin-right: 15px;
}

.job-title-section {
  flex: 1;
}

.job-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #1b1b1b;
}

.company-name {
  color: #666;
  font-size: 14px;
}

.location {
  color: #666;
  font-size: 14px;
  margin-top: 5px;
}

.salary-section {
  padding: 12px 16px;
  border-top: 1px solid #eee;
}

.salary-item {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  margin: 6px 0;
  color: #1b1b1b;
}

.salary-item .label {
  color: #666;
}

.tags {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  flex-wrap: wrap;
}

.tag {
  background-color: #e0f2fe;
  color: #1d4ed8;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
}

.description {
  padding: 12px 16px;
  font-size: 0.9rem;
  color: #555;
  line-height: 1.4;
  border-top: 1px solid #eee;
}

.footer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-top: 1px solid #eee;
}

.interaction {
  display: flex;
  gap: 12px;
  font-size: 0.85rem;
  color: #666;
}

.apply-btn {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: transform 0.2s ease;
}

.apply-btn:hover {
  transform: translateY(-1px);
}

.footer-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

.btn-reset, .btn-more {
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
}

.btn-reset {
  background-color: white;
  color: #3498db;
}

.btn-reset:hover {
  background-color: #f0f0f0;
}

.btn-more {
  background-color: #3498db;
  color: white;
}

.btn-more:hover {
  background-color: #2980b9;
}
</style>